<template>
    <div>
        <el-row>
            <el-col :span="24" align="right" class="searchPalce">
                <el-button type="primary" icon="el-icon-upload" @click="dialogVisible=true" style="float:left">文件上传</el-button>
                <el-select v-model="query.modleType" clearable placeholder="请选择模板类型">
                    <el-option v-for="(v,i) in modleTypes" :key="i" :label="v.typeName" :value="v.typeName"></el-option>
                </el-select>
                <el-select v-model="query.dataVersion" clearable placeholder="请选择版本号">
                    <el-option v-for="(v,i) in dataVersions" :key="i" :label="v.dataVersion" :value="v.dataVersion"></el-option>
                </el-select>
                <el-date-picker v-model="query.beginTime" placeholder="开始时间"></el-date-picker>
                <el-date-picker v-model="query.endTime" placeholder="结束时间"></el-date-picker>
                <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
                <el-button style="margin-left:5px" type="warning" icon="el-icon-refresh">刷新</el-button>
                <el-button style="margin-left:5px" type="success" icon="el-icon-download">下载</el-button>
            </el-col>
            <el-col :span="24">
                <el-table stripe border :data="List" height="700">
                    <el-table-column type="index" align="center"></el-table-column>
                    <el-table-column v-for="(v,k,i) in prop" :key="i" :prop="k" :label="Label[i]" align="center"></el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog title="文件上传" :visible.sync="dialogVisible"></el-dialog>
    </div>
</template>

<script>
import * as api from "@/api";
import JSonToCSV from "@/utils/JsonToCSV";
export default {
  data() {
    return {
      dialogVisible: false,
      query: {
        modleType: "",
        dataVersion: "",
        beginTime: "",
        endTime: ""
      },
      prop: {
        title1: "",
        title2: "",
        title3: ""
      },
      Label: ["标题1", "标题2", "标题3"],
      modleTypes: [],
      dataVersions: [],
      List: [
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        },
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        },
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        },
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        },
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        },
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        },
        {
          title1: "值1",
          title2: "值2",
          title3: "值3"
        }
      ]
    };
  },
  methods: {
    async init() {
      let res = await api.DataDownload();
      this.modleTypes = res.modleType;
      this.dataVersions = res.dataVersion;
    },
    async search() {
      let res = await api.queryData(this.query);
      JSonToCSV.setDataConver({
          data: [res]
      })
    //   alert(JSON.stringify(res));
    }
  },
  mounted() {
    // JSonToCSV.setDataConver({
    //   data: [
    //     { name: "张三", amont: "323433.56", proportion: 33.4 },
    //     { name: "李四", amont: "545234.43", proportion: 55.45 }
    //   ],
    //   fileName: "test",
    //   columns: {
    //     title: ["姓名", "金额", "占比"],
    //     key: ["name", "amont", "proportion"],
    //     formatter: function(n, v) {
    //       if (n === "amont" && !isNaN(Number(v))) {
    //         v = v + "";
    //         v = v.split(".");
    //         v[0] = v[0].replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 千分位的设置
    //         return v.join(".");
    //       }
    //       if (n === "proportion") return v + "%";
    //     }
    //   }
    // });
    // this.init();
  }
};
</script>


<style>
.el-table th > .cell {
  font-size: 18px;
  color: black;
}
.searchPalce {
  background-color: white;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}
</style>
